/** @format */

import classnames from 'classnames'
import SvgIcon from '@/components/SvgIcon/SvgIcon'
import styles from './ChannelMgr.module.scss'
import { useAppDispatch, useAppSelector } from '@/store/hooks'
import useApiData from '@/hooks/useApiData'
import {
  getAllChannelListAsync,
  delChannelAsync,
  postChannelAsync
} from '@/store/slice/home'
import { useMemo, useState } from 'react'
import { RootState } from '@/types/store'
import type { ChannelItem } from '@/types/http'
import { Toast } from 'antd-mobile'

type Props = {
  activeChannel: string
  onClose: () => void
  onEnter: (item: ChannelItem) => void
}
const ChannelMgr = ({ activeChannel, onClose, onEnter }: Props) => {
  // 用户已选择频道
  const userChannels = useAppSelector(
    (state: RootState) => state.home.userChannels
  )
  // 所有频道
  const { allChannels } = useApiData(getAllChannelListAsync, 'home')

  // 未选择的频道
  const unselectedChannels = useMemo(() => {
    return allChannels.filter(
      (item) => !userChannels.some(({ id }) => id === item.id)
    )
  }, [userChannels, allChannels])

  // 是否是编辑状态
  const [isEdit, setIsEdit] = useState(false)

  const dispatch = useAppDispatch()

  // 进入/删除频道
  const onClick = (item: ChannelItem) => {
    // 非编辑状态
    if (!isEdit) {
      onEnter(item)
    } else {
      if (item.id === 0) return Toast.show('推荐频道不可删')
      if (activeChannel === item.name) return Toast.show('当前频道不可删')
      if (userChannels.length <= 4) return Toast.show('频道不能少于4个')
      // 删除频道
      dispatch(delChannelAsync(item.id))
    }
  }

  // 新增频道
  const onAdd = (item: ChannelItem) => {
    if (!isEdit) return Toast.show('编辑状态下可新增')

    dispatch(postChannelAsync(item))
  }

  return (
    <div className={styles.root}>
      <div className='channel-header'>
        <SvgIcon
          name='btn_channel_close'
          onClick={() => {
            onClose()
            setTimeout(() => {
              setIsEdit(false)
            }, 500)
          }}
        />
      </div>
      <div className='channel-content'>
        <div className={classnames('channel-item', isEdit ? 'edit' : '')}>
          <div className='channel-item-header'>
            <span className='channel-item-title'>我的频道</span>
            <span className='channel-item-title-extra'>点击进入频道</span>
            <span
              className='channel-item-edit'
              onClick={() => setIsEdit(!isEdit)}>
              {isEdit ? '保存' : '编辑'}
            </span>
          </div>
          <div className='channel-list'>
            {userChannels.map((item) => (
              <span
                key={item.id}
                className={classnames(
                  'channel-list-item',
                  activeChannel === item.name ? 'selected' : ''
                )}
                onClick={() => onClick(item)}>
                {item.name}
                {isEdit && activeChannel !== item.name ? (
                  <SvgIcon name='btn_tag_close' />
                ) : null}
              </span>
            ))}
          </div>
        </div>

        <div className='channel-item'>
          <div className='channel-item-header'>
            <span className='channel-item-title'>频道推荐</span>
            <span className='channel-item-title-extra'>点击添加频道</span>
          </div>
          <div className='channel-list'>
            {unselectedChannels.map((item) => (
              <span
                className='channel-list-item'
                key={item.id}
                onClick={() => onAdd(item)}>
                + {item.name}
              </span>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

export default ChannelMgr
